<template>
	<view>
		<image src="../../static/me/bg1.jpg" mode="" style="position: fixed;top: 0; left: 0;width: 100vw; height: 100vh;"></image>
		<view style="z-index: 100;position: absolute;width: 100vw;">
			<view class="flex-fill form">
				<list-cell :hover="false">
					<view class="form-input w-100 d-flex align-items-center ">
						<view class="label">用户类型</view>
						<view class="input flex-fill"><input type="text" placeholder-class="text-color-assist " :placeholder="userInfo.userType" disabled="true" /></view>
					</view>
				</list-cell>
				<list-cell :hover="false">
					<view class="form-input w-100 d-flex align-items-center">
						<view class="label">我的姓名</view>
						<view class="input flex-fill">
							<input type="text" placeholder="请填写姓名" maxlength="4" placeholder-class="text-color-assist font-size-base" v-model="userInfoForm.name" />
						</view>
					</view>
				</list-cell>
				<list-cell :hover="false">
					<view class="form-input w-100 d-flex align-items-center">
						<view class="label">我的性别</view>
						<view class="input flex-fill">
							<view class="radio-group">
								<view class="radio" :class="{ checked: userInfoForm.sex }" style="margin-right: 10rpx;" @tap="userInfoForm.sex = 1">先生</view>
								<view class="radio" :class="{ checked: !userInfoForm.sex }" @tap="userInfoForm.sex = 0">女士</view>
							</view>
						</view>
					</view>
				</list-cell>
				<!-- 送水员就手机号码  手机号码不能修改 -->
				<list-cell :hover="false" v-if="userInfo.userType != '学生'">
					<view class="form-input w-100 d-flex align-items-center">
						<view class="label">手机号码</view>
						<view class="input flex-fill"><input type="text" disabled :placeholder="userInfo.phone" /></view>
					</view>
				</list-cell>
				<list-cell :hover="false" v-if="userInfo && !userInfo.wxOpenid">
					<view><button type="primary" size="mini" open-type="getUserInfo" @getuserinfo="bindWeiXin">绑定微信</button></view>
				</list-cell>
				<list-cell :hover="false">
					<view><button type="primary" size="mini" @tap="toUpdatePassword()">修改密码</button></view>
				</list-cell>

				<view class="btn-box" style="margin-top: 20px;"><button type="primary" class="save-btn" @tap="save">保存</button></view>
			</view>
		</view>
	</view>
</template>

<script>
import listCell from '@/components/list-cell/list-cell';

export default {
	components: {
		listCell
	},
	data() {
		return {
			userInfo: null,
			userInfoForm: {}
		};
	},
	onShow() {
		this.userInfo = uni.getStorageSync("userInfo")
		this.userInfoForm = {
			name: this.userInfo.name,
			sex: this.userInfo.sex
		};
		this.getUserInfo();
	},
	methods: {
		// 同步用户信息
		getUserInfo(){
			let that = this;
			if(this.userInfo.userType == '学生'){
				that.$request('/student/info', 'get').then(result => {
					that.userInfo = result.data;
					uni.setStorageSync("userInfo", result.data);
					that.userInfoForm = {
						name: result.data.name,
						sex: result.data.sex
					};
				});
			}else{
				that.$request('/worker/info', 'get').then(result => {
					that.userInfo = result.data;
					uni.setStorageSync("userInfo", result.data);
					that.userInfoForm = {
						name: result.data.name,
						sex: result.data.sex
					};
				});
			}
		},
		save() {
			if (this.userInfo.userType == '学生') {
				this.updateStudentInfo();
			} else {
				this.updateWorkerInfo();
			}
		},
		updateStudentInfo() {
			let that = this;

			if (!that.userInfoForm.name || that.userInfoForm.name.length > 4) {
				that.$msg('姓名不合法');
				return false;
			}

			that.$request('/student', 'put', that.userInfoForm).then(() => {
				that.userInfo.name = that.userInfoForm.name;
				that.userInfo.sex = that.userInfoForm.sex;
				uni.setStorageSync("userInfo", that.userInfo)
				uni.navigateBack();
			});
		},
		updateWorkerInfo() {
			let that = this;
			if (!that.userInfoForm.name || that.userInfoForm.name.length > 4) {
				that.$msg('姓名不合法');
				return false;
			}
			that.$request('/worker', 'put', that.userInfoForm).then(() => {
				that.userInfo.name = that.userInfoForm.name;
				that.userInfo.sex = that.userInfoForm.sex;
				uni.setStorageSync("userInfo", that.userInfo)
				uni.navigateBack();
			});
		},
		// 去修改密码
		toUpdatePassword() {
			uni.navigateTo({
				url: '/pages/me/password/updateWorkerPassword'
			});
		},
		// 绑定微信 通过code在服务器获取微信openid来绑定微信
		bindWeiXin(e) {
			const that = this;
			// let weixUserInfo = e.detail.userInfo // {avatarUrl, city, country, gender, nickname...}
			uni.login({
				provider: 'weixin',
				success: wxres => {
					let path = "/student/weixin";
					if(that.userInfo.userType == '送水员')
						path = "/worker/weixin"
					// eg: {code: "073BdF1w3us1mV2SRk1w3MDxpH3BdF1z", errMsg: "login:ok"}
					console.log('绑定微信 获取到的code=', wxres.code);
					that.$request(path, 'put', {
						wxCode: wxres.code,
						wxAvatar: e.detail.userInfo.avatarUtl
					}).then(result => {
						that.userInfo.wxOpenid = result.data;
						that.userInfo.wxAvatar = e.detail.userInfo.avatarUrl; // 微信头像
						uni.setStorageSync("userInfo", that.userInfo)
						that.$msg('绑定成功');
						uni.reLaunch({
							url: '/pages/me/index'
						});
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}

.container {
	padding: 20rpx 30rpx;
}

.form {
	border-radius: 8rpx;
}

.form-input {
	.label {
		width: 160rpx;
		font-size: $font-size-base;
		color: $text-color-base;
	}

	.input {
	}

	.radio-group {
		display: flex;
		justify-content: flex-start;

		.radio {
			padding: 10rpx 30rpx;
			border-radius: 6rpx;
			border: 2rpx solid $text-color-assist;
			color: $text-color-assist;
			font-size: $font-size-base;

			&.checked {
				background-color: $color-primary;
				color: $text-color-white;
				border: 2rpx solid $color-primary;
			}
		}
	}
}
.save-btn {
	width: 90%;
	border-radius: 50rem !important;
	font-size: $font-size-lg;
}
</style>
